<script setup lang='ts'>
  import { reactive, computed, } from 'vue';
  import xmdialog from '@/components/xmdialog.vue';
  import request from '@/api/index';
  import { xmloading, xmtoast, } from '@/utils/public';
  import { Toast } from 'vant';
  import { storeToRefs } from 'pinia'
  import { userStore } from '@/pinia/modules/user';
  const UseUserStore = userStore();
  const { jd_balance, diamond_balance } = storeToRefs(UseUserStore);
  const action = reactive({
    show:false,
    pageType:1,
    goods_img:'',
    price:0,
    timeText:'',
    goods_name:''
  })
  const form = reactive({
    goods_id:0,
    number:1
  })
  const countTotal = computed(()=>{
    return form.number * action.price
  })
  const filterButSet = ()=>{
    const price = (form.number+1) * action.price
    if(action.pageType == 1) {
      if(diamond_balance.value < price) return false
    }
    if(action.pageType == 2) {
      if(jd_balance.value < price) return false
    }
    return true
  }
  const handleadd = ()=>{
    if(!filterButSet()) return
    // 大于可购买数量 限制增加
    form.number +=1
  }
  const handlereduce = ()=>{
    if(form.number == 1) return
    form.number -=1
  }
  const handleSubmit = async()=>{
    const loading = xmloading()
    let res
    if(action.pageType == 1) {
      res = await request.jdUserBuy({
        goods_id:form.goods_id,
        num:form.number
      })
    }
    if(action.pageType == 2) {
      res = await request.useJdBuyGift({
        gift_id :form.goods_id,
        num:form.number
      })
    }
    if(!res) return
    const { error_code } = res.data
    if( error_code == 4001) return xmtoast('钻石不足')
    if( error_code == 4030) return xmtoast('金豆不足')
    loading.close()
    closeDialog()
    UseUserStore.getWallet()
    xmtoast('购买成功')
  }
  const closeDialog = ()=>{
    action.show = false
  }
  const openDialog = (query:any={})=>{
    const {
      gift_id=0, goods_id=0, image='',
      small_img='', type=0, price=0,
      timeText='', name='', goods_name='' } = query;
    if(!gift_id && !goods_id) return console.error('goods_id error')
    let form_id = 0
    let form_img = ''
    if(type == 1) {
      form_id = goods_id
      form_img = small_img
    }
    if(type == 2) {
      form_id = gift_id
      form_img = image
    }
    Object.assign(form,{
      goods_id:form_id,
      number:1
    })
    Object.assign(action,{
      show:true,
      pageType:type,
      goods_img:form_img,
      price,
      timeText,
      goods_name:goods_name || name
    })
  }
  defineExpose({
    openDialog
  })
</script>

<template>
  <div class="exchangeDialog" :style="{'--exChangeBack':action.pageType == 1?'var(--shopExchangeBackColor288)':'var(--shopExchangeBackColor256)'}">
    <xmdialog class="exchange" v-model:dialogshow="action.show">
      <div class="titlebox">
        {{ action.pageType == 1?'购买道具':'' }}
        {{ action.pageType == 2?'礼物兑换':'' }}
      </div>
      <div class="goodsimg flex-align-center">
        <xmimg :src="action.goods_img" />
        <div v-if="action.pageType == 1" class="time">{{ action.timeText }}</div>
      </div>
      <div class="goodsName">{{ action.goods_name }}</div>
      <div class="handleNum flex-align-center">
        <div class="title">兑换数量</div>
        <div class="numbox flex-align">
          <div @click="handlereduce" class="but">
            <xmimg src="shopImage/icon6.png" :class="form.number == 1?'gray':''" />
          </div>
          <div class="num">{{ form.number }}</div>
          <div @click="handleadd" class="but" :class="!filterButSet()?'gray':''">
            <xmimg src="shopImage/icon7.png" />
          </div>
        </div>
      </div>
      <div v-if="action.pageType == 1" class="give flex">
        <span class="title">赠送</span>
        <div class="flex-align">
          <xmimg src="shopImage/icon5.png" />
          <span>{{ countTotal }}</span>
        </div>
      </div>
      <div @click="handleSubmit" class="handleSubmit flex-align-center">
        {{ countTotal }}{{ ['','钻石','金豆'][action.pageType] }}
      </div>
    </xmdialog>
  </div>
</template>

<style lang='scss' scoped>
  .gray {
    opacity: .3;
  }
  :deep(.Functionality){
    position: relative;
    width: 188px;
    height: max-content;
    min-height: 223px;
    padding: 0 0 24px;
    box-sizing: border-box;
    background: var(--exChangeBack);
  }
  .titlebox {
    width: 100%;
    height: 30px;
    line-height: 30px;
    color: var(--shopExchangeTitleFontColor);
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    background: var(--shopExchangeTitleBackColor);
  }
  .goodsimg {
    position: relative;
    width: 84px;
    height: 84px;
    margin: 16px auto 0;
    border-radius: 4px;
    box-sizing: border-box;
    background: var(--shopGoodsBackColor);
    img {
      width: 100%;
    }
    .time {
      position: absolute;
      right: -1px;
      bottom: -1px;
      width: 33px;
      height: 14px;
      line-height: 14px;
      color: var(--shopGoodsDayFontColor);
      font-size: 10px;
      font-weight: 500;
      text-align: center;
      background: var(--shopGoodsDayBackColor);
      border-radius: 4px 0 4px 0;
    }
  }
  .goodsName {
    color: var(--shopExchangeGoodsNameColor);
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    margin: 8px auto 12px;
  }
  .handleNum {
    margin:0 0 12px;
    .title {
      color: var(--shopExchangeNumTitleFontColor);
      font-size: 12px;
      font-weight: 400;
      margin-right: 24px;
    }
    .numbox {
      height: 18px;
      border-radius: 2px;
      border: var(--shopExchangeNumBorderColor);
      background: var(--shopExchangeNumBackColor);
      .num {
        width: 32px;
        height: 100%;
        line-height: 18px;
        color: var(--shopExchangeNumFontColor);
        font-size: 12px;
        font-weight: 500;
        text-align: center;
        border-left: var(--shopExchangeNumBorderColor);
        border-right: var(--shopExchangeNumBorderColor);
      }
      .but {
        position: relative;
        width: 18px;
        height: 100%;
        img {
          width: 100%;
          height: auto;
        }
      }
    }
  }
  
  .give {
    width: max-content;
    min-width: 98px;
    height: 20px;
    margin: 0 auto 16px;
    padding: 0 10px 0 16px;
    box-sizing: border-box;
    background: var(--shopExchangeGiveFontColor);
    border-radius: 14px;
    .title {
      line-height: 20px;
      color: var(--shopExchangeGiveNumTitleFontColor);
      font-size: 12px;
      font-weight: 400;
      margin-right: 9px;
    }
    div {
      img {
        width: 16px;
        height: 16px;
      }
      span {
        color: var(--shopExchangeGiveNumFontColor);
        font-size: 10px;
        font-weight: 500;
      }
    }
  }
  .handleSubmit {
    width: 84px;
    height: 28px;
    color: var(--shopExchangeSubmitButFontColor);
    font-size: 12px;
    font-weight: 500;
    margin: 0 auto;
    background: var(--shopExchangeSubmitButBack);
    .icon {
      width: 16px;
      height: 18px;
      margin-right: 2px;
    }
  }
</style>